$bgColor-1: #ff0a78;
$shadowColor-1: #ff6392;

$bgColor-2: #2c0b8e;
$shadowColor-2: #3d348b;

$bgColor-3: #4433ff;
$shadowColor-3: #3a86ff;

$bgColor-4: #d90429;
$shadowColor-4: #ef233c;

$bgColor-5: #57cc99;
$shadowColor-5: #80ed99;

$bgColor-6: #ffd819;
$shadowColor-6: #ffe566;

$bgColor-7: #adb5bd;
$shadowColor-7: #ced4da;

$bgColor-8: #495057;
$shadowColor-8: #6c757d;

$bgColor-9: #212529;
$shadowColor-9: #343a40;

$shadow-border-buttons: (
  $bgColor-1,
  $shadowColor-1,
  $bgColor-2,
  $shadowColor-2,
  $bgColor-3,
  $shadowColor-3,
  $bgColor-4,
  $shadowColor-4,
  $bgColor-5,
  $shadowColor-5,
  $bgColor-6,
  $shadowColor-6,
  $bgColor-7,
  $shadowColor-7,
  $bgColor-8,
  $shadowColor-8,
  $bgColor-9,
  $shadowColor-9
);

@mixin buttons-generator-shadow-border-sliding--common($bgColor, $shadowColor) {
  min-width: 130px;
  height: 40px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  background: $bgColor;
  z-index: 1;
  &:hover::after {
    width: 100%;
    left: 0;
  }
  &:after {
    border-radius: 5px;
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    z-index: -1;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
      7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background-color: $shadowColor;
    right: 0;
  }
  &:active {
    top: 2px;
  }
}

@for $i from 1 through 9 {
  .buttons-genarator-shadow-border-sliding--#{$i} {
    @include buttons-generator-shadow-border-sliding--common(
      nth($shadow-border-buttons, 2 * $i - 1),
      nth($shadow-border-buttons, 2 * $i)
    );
  }
}
